<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>svg</title>
			<!-- <script src="https://img01.yuandaxia.cn/Content/img/tutorials/d3js/d3.v4.min.js"></script> -->

		<style type="text/css">
			svg {
				border: 1px solid #CCCCCC;
			}
		</style>
	</head>
	<body>
		<svg id="s" version="1.1" baseProfile="full" width="100%" height="1000" xmlns="http://www.w3.org/2000/svg">
			<g id="g1" transform="translate(100,100)">
				<rect width="100" height="100" rx="2"
				  style="fill:#ffffff;stroke-width:1;stroke:#CCCCCC"/>
				<text x="0" y="15" style="font-size: 12px;" fill="#666">input_wms_entry</text>
				<text x="0" y="35" style="font-size: 12px;" fill="#666">WMS入库</text>
				<line x1="0" y1="45" x2="100" y2="45" style="stroke:#cccccc;stroke-width:1"/>
			</g>
		</svg>
	</body>
</html>
<script type="text/javascript">
	document.getElementById("g1").addEventListener("mousedown", function(event) {
		
		let self = this;
		event.target.style.cursor = "crosshair"
		//点击的坐标
		let pointX = event.clientX;
		let pointY = event.clientY;
		
		var x = event.pageX - event.offsetX;
		var y = event.pageY - event.offsetY;
		
		//鼠标松开事件
		document.getElementById("g1").addEventListener("mouseup", function(event) {
			console.log("鼠标松开")
			document.getElementById("s").removeEventListener('mousemove', window.move)
		}, false);
		
		window.move=function(event) {
			let finalX=(event.pageX - x);
			let finalY=(event.pageY - y);
			self.setAttribute("transform","translate("+finalX+","+finalY+")")
		}
		
		//监听移动事件
		document.getElementById("s").addEventListener("mousemove", window.move, false);
	}, false);
	
	
</script>
